<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Lato");
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    ul {
      display: flex;
      list-style-type: none;
    }
    
    ul span {
      padding-top: 10px;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: white;
    }
    
    ul .circle-gauge {
      /* $gauge-colors: , , ,; */
      --gauge-max-value: 1000;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 1em;
    }
    
    ul .circle-gauge:nth-child(1) a {
      --percentage: calc(var(--gauge-value) / var(--gauge-max-value) * 100%);
      background: conic-gradient( #e74c3c var(--percentage), #111 0);
    }
    
    ul .circle-gauge:nth-child(2) a {
      --percentage: calc(var(--gauge-value) / var(--gauge-max-value) * 100%);
      background: conic-gradient( #3498db var(--percentage), #111 0);
    }
    
    ul .circle-gauge:nth-child(3) a {
      --percentage: calc(var(--gauge-value) / var(--gauge-max-value) * 100%);
      background: conic-gradient( #2ecc71 var(--percentage), #111 0);
    }
    
    ul .circle-gauge:nth-child(4) a {
      --percentage: calc(var(--gauge-value) / var(--gauge-max-value) * 100%);
      background: conic-gradient( #f1c40f var(--percentage), #111 0);
    }
    
    ul .circle-gauge a {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 5em;
      height: 5em;
      font-family: Lato, sans-serif;
      text-decoration: none;
      color: white;
      background: transparent;
      border-radius: 50%;
      counter-reset: value var(--gauge-value);
    }
    
    ul .circle-gauge a::before {
      position: absolute;
      content: counter(value);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90%;
      height: 90%;
      background: #222;
      border-radius: inherit;
    }
  </style>
</head>

<body>
  <ul>
    <li class="circle-gauge">
      <a href="#" style="--gauge-value:900;"></a><span>design</span></li>
    <li class="circle-gauge">
      <a href="#" style="--gauge-value:744"></a><span>creativity</span></li>
    <li class="circle-gauge">
      <a href="#" style="--gauge-value:666"></a><span>accessbility</span></li>
    <li class="circle-gauge">
      <a href="#" style="--gauge-value:800"></a><span>content</span></li>
  </ul>
</body>
<script></script>

</html>